<template>
  <div class="page">
    <!-- Form -->
    <Form
      ref="formRef"
      :form="form"
      :config="config"
      :name="name"
      search
      @search-form="searchForm"
      @reset-form="resetForm"
    >
      <template #inputNumber="{ data }">
        <span>{{ data.text }}</span>
      </template>
    </Form>
    <!-- Table -->
    <TableButtons class="mb10" layout="add" @click="clickTableButtons" />
    <Table :columns="columns" :data="list">
      <template #operation="{ scope: { row } }">
        <el-link type="primary" :underline="false" @click="addHandle(row)">
          编辑
        </el-link>
        <el-popconfirm title="确认删除?" @confirm="confirmDeleteEvent">
          <template #reference>
            <el-link
              type="danger"
              :underline="false"
              @click="deleteHandle(row)"
            >
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </Table>
    <!-- Pagination -->
    <Pagination :pagination="pagination" />

    <!-- Dialog -->
    <DialogAdd ref="dialogAddRef" :current="current" />
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import TableButtons from '@/components/TableButtons/TableButtons.vue'
import Table from '@/components/Table/Table.vue'
import Pagination from '@/components/Pagination/Pagination.vue'
import DialogAdd from './add.vue'
// hooks
import useForm from '@/hooks/useForm'
import useTable from '@/hooks/useTable'
// api
import { getSmsStaff } from '@/api/sms'
// others
import { ref } from 'vue'
import { formData, formConfig, tableColumns } from './config'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus'

// const { proxy } = getCurrentInstance()

/** Form */
const formRef = ref()
const { form, config, submitForm, resetFormData } = useForm({
  formRef,
  formData,
  formConfig
})
const searchForm = async () => {
  submitForm(() => {
    getTableList(form)
  })
}
const resetForm = () => {
  resetFormData()
  searchForm()
}
/** Table */
const {
  list,
  columns,
  pagination,
  doResult: getTableList
} = useTable({
  request: getSmsStaff,
  tableColumns
})
/** TableBUttons */
const clickTableButtons = (item) => {
  if (item.value === 'add') {
    addHandle()
  }
}

/** 新增 编辑 删除 */
const dialogAddRef = ref(null)
const current = ref(null)
const addHandle = (row) => {
  current.value = row || null
  dialogAddRef.value.show()
}
// 删除
const deleteHandle = (row) => {
  current.value = row || null
}
const confirmDeleteEvent = () => {
  deleteApiPost()
}
const deleteApiPost = debounce(() => {
  setTimeout(() => {
    ElMessage.success('删除成功！')
  }, 200)
}, 200)
</script>

<style lang="less" scoped></style>
